<template>
  <div>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <div class="row clearfix">
      <div class="col-md-12 column">
        <table class="table table-hover table-striped">
          <thead>
          <tr>
            <th style="text-align: center">编号</th>
            <th style="text-align: center">姓名</th>
            <th style="text-align: center">用户名</th>
            <th style="text-align: center">密码</th>
            <th style="text-align: center">性别</th>
            <th style="text-align: center">联系方式</th>
            <th style="text-align: center">身份证号</th>
            <th style="text-align: center">身份证正面</th>
            <th style="text-align: center">身份证反面</th>
            <th style="text-align: center">营业执照</th>
            <th style="text-align: center">操作</th>
          </tr>
          </thead>

          <tbody v-for="item in items">
            <tr>
              <td>{{item.id}}</td>
              <td>{{item.realName}}</td>
              <td>{{item.username}}</td>
              <td>{{item.password}}</td>
              <td v-if="item.gender === 1">男</td>
              <td v-if="item.gender === 0">女</td>
              <td>{{item.phone}}</td>
              <td>{{item.idcard}}</td>
              <td>{{item.idcardUp}}</td>
              <td>{{item.idcardBack}}</td>
              <td>{{item.businessLicense}}</td>
              <td>
                删除  编辑
              </td>
            </tr>
          </tbody>
          <br/>
          共{{totalCount}}条数据
          <text>首页</text>
          <a @click="first">首页</a>
          <a @click="previous">上一页</a>
          <a @click="next">下一页</a>
          <a @click="last">末页</a>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "EmployerManager",
      data() {
        return {
          items:"",
          totalCount:"",
          count:"",
          startIndex:0,
          pageSize:15,
          pages:""  //页数
        }
      },
      created() {
        this.count=this.totalCount
        console.log("进来了")
        let fd = new FormData();
        fd.append("startIndex",this.startIndex);
        fd.append("pageSize",this.pageSize);
        this.query()
        this.queryLimit(fd)
      },
      methods: {
        first: function(){//首页
          if (this.startIndex == 0){
            alert("已经是首页了")
          }else {
            this.startIndex = 0;
            let fd = new FormData();
            fd.append("startIndex",this.startIndex);
            fd.append("pageSize",this.pageSize);
            this.queryLimit(fd)
          }
        },
        previous: function(){//上一页
          this.startIndex -= 15
          if (this.startIndex<0){
            this.startIndex += 15
            alert("已经是首页了")
          }else {
            let fd = new FormData();
            fd.append("startIndex",this.startIndex);
            fd.append("pageSize",this.pageSize);
            console.log(this.startIndex)
            this.queryLimit(fd)
          }
          console.log("previous:"+this.startIndex)
        },
        next: function(){//下一页
          if (this.count<15){
            alert("已经最后一页")
          }else {
            this.startIndex += 15
            let fd = new FormData();
            fd.append("startIndex",this.startIndex);
            fd.append("pageSize",this.pageSize);
            console.log(this.startIndex)
            this.queryLimit(fd)
          }
        },
        last: function(){//末页
          if (this.totalCount % this.pageSize != 0){
            this.startIndex = this.totalCount-((this.pages-1)*this.pageSize)
          }
          console.log(this.startIndex)
        },
        queryLimit: function(fd){//分页

          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }

          this.$axios.post("boss/query",fd,config).then( res => {
            console.log(res.data)
            this.items = res.data
            this.count = res.data.length

          }).catch( res => {
            console.log(res.data)
          })
        },
        query: function () {//查询总数据条数

          let config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          this.$axios.post("boss/query",config).then( res => {
            this.totalCount = res.data.length
            if (this.totalCount % this.pageSize == 0){
              this.pages = this.totalCount/this.pageSize
            }else {
              this.pages = parseInt(this.totalCount/this.pageSize)+1
            }
            console.log("总页数"+this.pages)
          }).catch( res => {
            console.log(res.data)
          })
        }
      }
    }
</script>

<style scoped>

</style>
